<?= $Header ?>

    <header class="jumbotron masthead">
      <div class="container"> 
        <h1><?= $text_download ?></h1> 
        
        <div class="row">
          <blockquote>
            <p><?= $text_status ?></p>
			<p><?= $text_help ?></p>
            <hr />
            <div class="row">
            <div class="span3"></div>
            <div id="" class="span6">
              <div class="container-narrow row-fluid">
                <center><form action="javascript:void(0);">
                  <div id="form_email" style="display:none;">
                    <div class="input-append">
					<div class="add-on">Enter your email to download</div> <input type="text" id="email" name="email" class="input-block-level" value="" style="width:50%" placeholder="Email" />
                    <button class="btn btn-success" id="email-button"> Download </button>
					<div class="add-on" id="loading" style="display:none;">Loading ...</div>
				  </div></div>
				  <div id="success"></div>
                  <a class="btn btn-large btn-success " id="download-button" href="javascript:void(0);"><?= $button_download ?></a>
				   </div>
                </form></center>

			  </div>
			</div>
            <div id="staff_progress" class="span6" style="display:none;">
              <div class="container-narrow row-fluid"> 
                <div class="row">
                      <div class="span2"></div>
                      <div class="span8">
                        <h3><?= $text_progress_staff ?>: 30%</h3>
                        <div class="progress progress-striped active">
                          <div class="bar" style="width: 30%;"></div>
                        </div>
                      </div>
                      <div class="span2"></div>
                </div>
              </div>
            </div>
            <div class="span3"></div>
            </div>
            <hr />
          </blockquote>
        </div>

        <div class="row">
          <div class="span5"></div>
          <div class="span6">
          </div>
        </div>
        
      </div> 
    </header>

    <script>
    $("#download-button").click(function(){
      $("#form_email").fadeIn();
      $(this).fadeOut()
    });
	$("#email-button").click(function(){
		email = $("#email").val();
		if (email == '') return;
		$.ajax({
			url: 'index.php?code=Download/Addemail&email=' + email,
			dataType: 'json',
			beforeSend: function() {
				$("#email-button").addClass('disabled');
				$("#loading").show();
			},
			complete: function() {
				$("#email-button").removeClass('disabled');
				$("#loading").hide();
			},
			success: function(json) {
				if (json['status'] == 'success') {
					$("#form_email").hide();
					html = '<a href="'+ json['link'] +'" class="btn btn-primary btn-large">Click here to download</a>';
					$("#success").html(html).faceIn();
				} else {
					alert('Email was fail! Please try again!');
				}
			},
			error: function(xhr, ajaxOptions, thrownError) {
				//alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
				html = xhr.responseText;
				$("#success").html(html).faceIn();
			}
		});
	});
    </script>
<?= $Footer ?>